<template>
	<div class="bg-color">
		<div id="headline">
			<div>
				<span class="status">{{$t('home.statusLabel')}}</span>
				<span :class="[issafe?'green':'red']">{{status}}</span>
			</div>
			<div>
				<span style="margin-right:14px;">
					{{$t('home.threat')}}
					<span class="num">
						{{attack_count.total?attack_count.total:0}}
					</span> 
						{{$t('home.unit')}}
				</span>
				<button @click="goDetail" class="button small-btn button--aylen">{{$t('home.detailBtn')}}</button>
			</div>
		</div>
		<div class="animation">
			<img v-if='issafe' class="animationbg" :src="`/static/${theme}-img/animationbg.png`" />
			<img v-else class="animationbg" :src="`/static/${theme}-img/redbg.png`" />
			<div class="dots"  v-if='issafe'>
				<img  class="dot" v-for='(item,index) in 7' :src="`/static/${theme}-img/dot1.gif`" :key="index"/>
			</div>
			<div class="dots" v-else>
				<img  class="dot" v-for='(item,index) in 7' :src="`/static/${theme}-img/reddot.gif`" :key="index"/>
			</div>
			<img v-if='issafe' class="swipe" :src="`/static/${theme}-img/swipe.png`" />
			<img v-else class="swipe" :src="`/static/${theme}-img/redswipe.png`" />
		</div>	
	</div>
</template>
<script>
export default {
	props:{
		attack_count:{
			type:Object,
			required:true
		}
	},
	data() {
		return {
			theme: this.themeColor,
			issafe: true
		}
	},
	methods: {
		goDetail () {
			this.$router.push('/logManage/log')
		}
	},
	watch:{
		attack_count: function(val) {
			this.issafe = val.is_save
			// this.issafe = true
		}
	},
	computed: {
		status: function() {			
			if (this.issafe) {
				return this.$t('home.safeStatus')
			} else {
				return this.$t('home.unsafeStatus')
			}
		}
	},
}
</script>
<style scoped lang="less">
	.bg-color {
		background: #ffffff;
		height: 237px;
		margin-top: 20px;
	}
	
	#headline {
		height: 30px;
		line-height: 30px;
		font-size: 14px;
		padding: 5px 28px;
	}
	
	#headline div {
		display: inline-block;
	}
	
	.status {
		margin-right: 10px;
	}
	
	.green {
		color: #32c149;
	}
	
	.red {
		color: #e7000e;
	}
	.num {
		color: #e7000e;
		margin-left: 10px;
	}
	#headline div:last-child {
		float: right;
	}	
	.animation {
		margin-top: 5px;
		width: 100%;
		height: 202px;
		position: relative;
	}
	
	.animationbg {
		width: 100%;
		position: absolute;
		top: 0;
	}
	
	.swipe {
		animation: swiping 2.5s linear infinite;
	}
	
	@keyframes swiping {
		from {
			transform: translateX(0);
		}
		to {
			transform: translateX(635px);
		}
	}
	
	@-moz-keyframes swiping {
		from {
			transform: translateX(0);
		}
		to {
			transform: translateX(635px);
		}
	}
	
	@-ms-keyframes swiping {
		from {
			transform: translateX(0);
		}
		to {
			transform: translateX(635px);
		}
	}
	
	@-webkit-keyframes swiping {
		from {
			transform: translateX(0);
		}
		to {
			transform: translateX(635px);
		}
	}
	/*dots*/
	
	.dots {
		position: absolute;
		top: 0;
	}
	
	.dot {
		position: absolute;
	}
	
	.dot:nth-child(1) {
		width: 15px;
		top: 77px;
		left: 135px;
	}
	
	.dot:nth-child(2) {
		top: 100px;
		left: 208px;
	}
	
	.dot:nth-child(3) {
		width: 20px;
		top: 118px;
		left: 270px;
	}
	
	.dot:nth-child(4) {
		top: 63px;
		left: 340px;
	}
	
	.dot:nth-child(5) {
		top: 132px;
		left: 400px;
	}
	
	.dot:nth-child(6) {
		width: 15px;
		top: 90px;
		left: 491px;
	}
	
	.dot:nth-child(7) {
		width: 18px;
		top: 118px;
		left: 545px;
	}
</style>